<!-- 主题设置抽屉 license by http://eleadmin.com -->
<template>
  <el-drawer
    size="760px"
    :visible="visible"
    :append-to-body="true"
    :title="'已核销入库明细'"
    @update:visible="updateVisible" @open="init">
    <el-form label-width="77px" :model="form" class="ele-form-search">
      <el-row :gutter="15">
        <el-col :lg="12" :md="24">
          <el-form-item label="发票号">
            <el-input v-model="form.vgoldtaxcode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :md="24">
          <el-form-item label="客户编码">
            <el-input v-model="form.custcode" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :lg="24" :md="24">
          <el-form-item label="客户名称">
            <el-input v-model="form.custname" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
<!--      <el-row :gutter="15">-->
<!--        <el-col :lg="12" :md="24">-->
<!--          <el-form-item label="药品名称">-->
<!--            <el-input v-model="form.invname" disabled></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :lg="12" :md="24">-->
<!--          <el-form-item label="批号">-->
<!--            <el-input v-model="form.vlotno" disabled></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
      <el-row :gutter="15">
        <el-col :lg="12" :md="24">
          <el-form-item label="发票数量">
            <el-input v-model="form.invoicenum" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :md="24">
          <el-form-item label="核销数量">
            <el-input v-model="form.checknum" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :lg="12" :md="24">
          <el-form-item label="剩余数量">
            <el-input v-model="form.remainnum" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="15">
          <el-col :lg="24" :md="24">
              <el-form-item label="">
                  <el-button
                type="primary"
                icon="el-icon-save"
                class="ele-btn-icon"
                @click="reload">确定
              </el-button>
              </el-form-item>
          </el-col>
      </el-row> -->
    </el-form>
    <ele-pro-table
      ref="tableMaterial"
      :where="where"
      :datasource="materialItem"
      :columns="columnsSO"
      :need-page="false"
      :toolbar="true"
      :selection.sync="choose"
      highlight-current-row
      @row-click="materialRowClick"
      height="calc(100vh - 243px)">
      <!-- 表头工具栏 -->
      <template slot="toolbar">
        <el-button v-if="false"
                   size="small"
                   type="primary"
                   icon="el-icon-plus"
                   class="ele-btn-icon"
                   @click="openEdit(null)"
        >添加
        </el-button>
        <el-button
          size="small"
          type="danger"
          icon="el-icon-delete"
          class="ele-btn-icon"
          @click="removeBatch"
        >删除
        </el-button>
      </template>
      <!-- 操作列 -->
      <template slot="realnum" slot-scope="{row}">
        <el-input size="small" v-model="row.realnum" clearable></el-input>
      </template>
    </ele-pro-table>
  </el-drawer>
</template>

<script>
import Locale from 'element-ui/lib/mixins/locale';
// 默认主题色
const DEFAULT_THEMES = [
  {
    name: 'default',
    value: null,
    color: '#1890ff'
  },
  {
    name: 'dust',
    value: '#5f80c7'
  },
  {
    name: 'sunset',
    value: '#faad14'
  },
  {
    name: 'volcano',
    value: '#f5686f'
  },
  {
    name: 'purple',
    value: '#9266f9'
  },
  {
    name: 'cyan',
    value: '#2bccce'
  },
  {
    name: 'green',
    value: '#33cc99'
  },
  {
    name: 'geekblue',
    value: '#32a2d4'
  }
];

export default {
  name: 'SecondSaleForm',
  mixins: [Locale],
  emits: [
    'change-style',
    'change-color',
    'change-dark-mode',
    'change-weak-mode',
    'update:visible'
  ],
  props: {
    // 是否显示, 支持.sync修饰
    visible: Boolean,
    // 颜色选择器预设颜色
    data: Array,
    material:Array
  },
  data() {
    let chooseColor = this.color;
    if (this.color && typeof this.themes !== 'undefined' && this.themes !== null) {
      (this.themes.length ? this.themes : DEFAULT_THEMES).forEach((t) => {
        if (this.color === t.value) {
          chooseColor = null;
        }
      });
    }
    return {
      form:{},
      materialItem:[],
      choose:[],
      columnsSO:[
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: "left"
        },
        {
          prop: 'dbilldate',
          label: '入库日期',
          showOverflowTooltip: true,
          minWidth: 70,
          align: 'center'
        },
        {
          prop: 'vbillcode',
          label: '入库单号',
          showOverflowTooltip: true,
          minWidth: 110,
          align: 'center'
        },
        //   {
        //     prop: 'custcode',
        //     label: '客户编码',
        //     showOverflowTooltip: true,
        //     minWidth: 100,
        //     align: 'center'
        //   },
        {
          prop: 'custname',
          label: '客户名称',
          showOverflowTooltip: true,
          minWidth: 140,
          align: 'left'
        },
        {
          prop: 'instocknum',
          label: '入库数量',
          showOverflowTooltip: true,
          minWidth: 70,
          align: 'center'
        },
        {
          prop: 'checknum',
          label: '已核数量',
          showOverflowTooltip: true,
          minWidth: 70,
          align: 'center'
        },
        {
          prop: 'opername',
          label: '操作人',
          showOverflowTooltip: true,
          minWidth: 70,
          align: 'center'
        },
        {
          prop: 'opertime',
          label: '操作时间',
          showOverflowTooltip: true,
          minWidth: 120,
        },
        //   {
        //     prop: 'realnum',
        //     label: '本次数量',
        //     showOverflowTooltip: true,
        //     minWidth: 100,
        //     align: 'center',
        //     slot:'realnum'
        //   },
        //   {
        //     prop: 'nqtorigprice',
        //     label: '发票无税单价',
        //     showOverflowTooltip: true,
        //     minWidth: 100,
        //     align: 'center'
        //   },
        //   // {
        //   //   prop: 'norigtaxmny',
        //   //   label: '发票价税合计',
        //   //   showOverflowTooltip: true,
        //   //   minWidth: 140,
        //   //   align: 'center'
        //   // },
        //   {
        //     prop: 'norigmny',
        //     label: '无税合计',
        //     showOverflowTooltip: true,
        //     minWidth: 140,
        //     align: 'center'
        //   },
        //   {
        //     prop: 'psnname',
        //     label: '业务员',
        //     showOverflowTooltip: true,
        //     minWidth: 80,
        //     align: 'center'
        //   },
        //   {
        //     prop: 'deptname',
        //     label: '部门',
        //     showOverflowTooltip: true,
        //     minWidth: 120,
        //     align: 'center'
        //   },
      ],
      // 默认的主题色
      defaultThemes: DEFAULT_THEMES,
      // 颜色选择器选中颜色
      chooseColor: chooseColor
    };
  },
  mounted() {
    console.log(this.data);
    console.log(this.material);
    if(this.data)
    {
      this.form = Object.assign({},this.data[0]);
    }
  },
  methods: {
    /* 修改visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    async init(){
      this.form = {};
      this.materialItem = {};
      if(this.data && this.data.length>0)
      {
        this.form = Object.assign({},this.data[0]);
        var res2 = await this.$http.get('/return/instockchecklist/'+this.form.csaleinvoicebid);
        if(res2.status==200)
        {
          this.materialItem = res2.data.data;
        }

      }
      if(this.material && this.material.length>0)
      {
        //this.materialItem = Object.assign([],this.material);
      }

    },
    materialRowClick(row)
    {
      //this.selectionMaterial = [];
      //this.$refs.tableMaterial.clearSelection();
      //this.selectionMaterial.push(row);
      this.$refs.tableMaterial.toggleRowSelection(row,true);

    },
    reload(){
      this.updateVisible(false);
      if(this.material && this.material.length>0)
      {
        this.$emit('donematerial',this.form.realreason,this.form.remark);
      }
      else
      {
        this.$emit('done',this.form.realreason,this.form.remark);

      }
    },
    async removeBatch(){
      if (this.choose.length === 0) return this.$message.info('请选择一个核销记录后删除');
      this.$confirm('确定要删除选中的核销数量吗?', '提示', {type: 'warning'}).then(() => {
        const loading = this.$loading({lock: true});
        var ids = this.choose[0].cgeneralbid;
        var invoicebid = this.choose[0].csaleinvoicebid;

        this.$http.post('/return/delinstcok/'+invoicebid+'/'+ids).then(res => {
          loading.close();
          if (res.data.code === 0) {
            this.$message({type: 'success', message: res.data.msg});
            this.form.soldnum = Number(this.form.soldnum) - Number(this.choose[0].checknum);
            this.updateVisible(false);
            this.$emit('done');
            this.$http.get('/return/instockchecklist/'+invoicebid).then(res => {
              if(res.status==200)
              {
                this.materialItem = res.data.data;
              }
            }).catch(e => {
              this.$message.error(e.message);
            });
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(e => {
          loading.close();
          this.$message.error(e.message);
        });
      }).catch(() => 0);
    },
    /* 切换主题色 */
    changeColor(value) {
      if (value !== this.color) {
        this.$emit('change-color', value);
      }
    },
    /* 修改主题风格 */
    changeStyle(key, value) {
      this.$emit('change-style', {key: key, value: value});
    },
    setHeadStyle(value) {
      this.changeStyle('headStyle', value);
    },
    setSideStyle(value) {
      this.changeStyle('sideStyle', value);
    },
    setLayoutStyle(value) {
      this.changeStyle('layoutStyle', value);
    },
    setSideMenuStyle(value) {
      this.changeStyle('sideMenuStyle', value ? 'mix' : 'default');
    },
    setBodyFull(value) {
      this.changeStyle('bodyFull', value);
    },
    setFixedHeader(value) {
      this.changeStyle('fixedHeader', value);
    },
    setFixedSidebar(value) {
      this.changeStyle('fixedSidebar', value);
    },
    setFixedBody(value) {
      this.changeStyle('fixedBody', value);
      if (value) {
        document.body.style.width = null;
      }
    },
    setLogoAutoSize(value) {
      this.changeStyle('logoAutoSize', value);
    },
    setColorfulIcon(value) {
      this.changeStyle('colorfulIcon', value);
    },
    setSideUniqueOpen(value) {
      this.changeStyle('sideUniqueOpen', value);
    },
    setWeakMode(value) {
      this.$emit('change-weak-mode', value);
    },
    setDarkMode(value) {
      this.$emit('change-dark-mode', value);
    },
    setShowFooter(value) {
      this.changeStyle('showFooter', value);
      if (!value) {
        document.body.style.width = null;
      }
    },
    setShowTabs(value) {
      this.changeStyle('showTabs', value);
    },
    setTabStyle(value) {
      this.changeStyle('tabStyle', value);
    }
  }
}
</script>

<style scoped>
.ele-setting-wrapper {
  padding: 20px 18px;
}

.ele-setting-wrapper .ele-setting-title {
  font-size: 13px;
  margin-bottom: 15px;
}

/* 主题风格 */
.ele-setting-wrapper .ele-setting-theme > div {
  width: 52px;
  height: 36px;
  line-height: 1;
  font-size: 18px;
  border-radius: 3px;
  margin: 0 20px 30px 0;
  padding: 14px 0 0 24px;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  display: inline-block;
  vertical-align: top;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: background-color .2s;
}

.ele-setting-wrapper .ele-setting-theme > div:before,
.ele-setting-wrapper .ele-setting-theme > div:after,
.ele-setting-wrapper .ele-setting-theme > div > .ele-bg-primary {
  content: "";
  width: 100%;
  height: 10px;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  transition: background-color .2s;
}

.ele-setting-dark .ele-setting-theme > div {
  box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

.ele-setting-dark .ele-setting-theme > div:before,
.ele-setting-dark .ele-setting-theme > div:after,
.ele-setting-dark .ele-setting-theme > div > .ele-bg-primary {
  background: #1f1f1f;
}

.ele-setting-wrapper .ele-setting-theme > div:after {
  width: 14px;
  height: 100%;
}

.ele-setting-wrapper .ele-setting-theme > div.ele-side-dark:after,
.ele-setting-wrapper .ele-setting-theme > div.ele-head-dark:before,
.ele-setting-wrapper .ele-setting-theme > div.ele-layout-mix:before,
.ele-setting-wrapper .ele-setting-theme > div.ele-layout-mix:after {
  background: #001529;
}

.ele-setting-dark .ele-setting-theme > div.ele-side-dark:after,
.ele-setting-dark .ele-setting-theme > div.ele-head-dark:before,
.ele-setting-dark .ele-setting-theme > div.ele-layout-mix:before,
.ele-setting-dark .ele-setting-theme > div.ele-layout-mix:after {
  background: #262626;
}

.ele-setting-wrapper .ele-setting-theme > div.ele-head-light:before,
.ele-setting-wrapper .ele-setting-theme > div.ele-head-dark:before,
.ele-setting-wrapper .ele-setting-theme > div > .ele-bg-primary {
  z-index: 1;
}

/* 主题色选择 */
.ele-setting-wrapper .ele-setting-colors {
  color: #fff;
  margin-bottom: 20px;
}

.ele-setting-wrapper .ele-setting-color-item {
  width: 20px;
  height: 20px;
  line-height: 22px;
  border-radius: 2px;
  margin: 8px 8px 0 0;
  display: inline-block;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  vertical-align: top;
  position: relative;
  text-align: center;
  cursor: pointer;
}

/* 主题配置项 */
.ele-setting-wrapper .ele-setting-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.ele-setting-wrapper .ele-setting-item .setting-item-title {
  flex: 1;
  line-height: 28px;
}

.ele-setting-wrapper .ele-setting-item .setting-item-control {
  line-height: 1;
  max-width: 95px;
}

.ele-setting-wrapper .el-divider {
  margin-bottom: 20px;
}

/* 颜色选择器 */
.ele-setting-color-picker.el-color-picker {
  height: auto;
  margin-top: 8px;
}

.ele-setting-color-picker.el-color-picker .el-color-picker__trigger {
  padding: 0;
  width: 20px;
  height: 20px;
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

.ele-setting-color-picker.el-color-picker .el-color-picker__color {
  border: none;
}

.ele-setting-color-picker.el-color-picker .el-color-picker__color-inner {
  border-radius: 2px;
}

.ele-setting-color-picker.el-color-picker .el-color-picker__empty {
  background: linear-gradient(45deg, #00dbde 5%, #fc00ff 105%);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  border-radius: 2px;
  font-size: 0;
}

.ele-setting-color-picker.el-color-picker .el-color-picker__icon {
  font-size: 14px;
}
.el-row {
  margin-bottom: -10px;
  margin-top: 1px;
  display: flex;
  flex-wrap: wrap
}
</style>
